{include file='public/header' /}
<style>
    .edui-dialog-image-body{
        height: 220px!important;
        overflow: hidden;
    }
    .edui-dialog-image .edui-image-wrapper{
        box-sizing: border-box;
        height: 100%;
    }
    .edui-tab-nav{
        height:43px;
    }
    .edui-dialog-image .edui-image-content {
        height: 200px!important;
    }
    #demo2{
        display: flex;
        align-items: center;
    }
    #demo2 li .operate{ color: #000; display: none;}
    #demo2 li .close{position: absolute;top: 5px; right: 5px;cursor:pointer;}
    #demo2 li:hover .operate{ display: block;}
    .operate{
        position: absolute;
        right: 0;
        top: -9px;
        color: black;
        font-size: 34px;
        /* border: 1px solid red; */
        font-weight: bold;
    }
    .item_img{
        position: relative;margin-right: 10px;
    }
    .attribute{
        width: 90%;
        border: 1px solid #e6e6e6;
        margin-top:20px;
    }
    .atr{
        height: 50px;
        border: 1px solid #e6e6e6;
    }
    .ath{
        width: 100px; border-left: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6;
    }
    .atd{
        display: flex;
        text-align: center;
        height: 38px;
        justify-content: center;
        align-items: center;
    }
    table input{
        text-align: center;
        border: none!important;
    }
    table td{
        border-right: 1px solid #e6e6e6;
        border-bottom: 1px solid #e6e6e6;
    }
    table td:last-child{
        border-right: none;
    }
</style>
<div class="layuimini-container">
    <form id="modelUserForm" lay-filter="modelUserForm" class="layui-form model-form">
        <input name="id" type="hidden"/>
        <div class="layui-form-item">
            <label for="" class="layui-form-label">商品标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" value="{$row->title ?? ''}" lay-verify="required" placeholder="请输入标题" class="layui-input" >
            </div>
        </div>

        <div class="layui-form-item">
        <label for="" class="layui-form-label">关键词</label>
        <div class="layui-input-block">
            <input type="text" name="keywords" value="{$row->keywords ?? ''}" placeholder="请输入关键词" class="layui-input" >
        </div>
    </div>

        <div class="layui-form-item">
        <label for="" class="layui-form-label">描述</label>
        <div class="layui-input-block">
            <textarea name="description" placeholder="请输入描述" class="layui-textarea">{$row->description ?? ""}</textarea>
        </div>
    </div>



        <div class="layui-form-item">
            <label for="" class="layui-form-label">商品主图</label>
            <div class="layui-input-block">
                <div class="layui-upload">
                    <button type="button" class="layui-btn layui-btn-sm uploadPic"><i class="layui-icon">&#xe67c;</i>图片上传</button>
                    <div class="layui-upload-list" >
                        <ul class="layui-upload-box layui-clear">

                            <li><img style="width:100px;height:60px" src="{$row->thumb}" /></li>

                        </ul>
                        <input type="hidden" name="thumb" class="layui-upload-input" value="{$row->thumb ?? ''}">
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-upload">
            <label class="layui-form-label">商品轮播图</label>
            <button type="button" class="layui-btn" id="test2">多图片上传</button>
            <span style="color: #FFB800">（图片尺寸：375px * 370px）</span>
            <blockquote class="layui-elem-quote layui-quote-nm " style="margin-top: 10px;margin-left: 110px;">
                预览图：
                <div class="layui-upload-list" id="demo2">
                    {notempty name="row->image"}
                    {volist name="$row->image" id="im"}
                    <li class="item_img"><div class="operate"></i><i  class="close layui-icon"></i></div>
                        <img src="{$im ?? ''}" class="layui-upload-img" width="60">
                        <input type="hidden" name="image[]" value="{$im ?? ''}">
                    </li>
                    {/volist}
                    {/notempty}

                </div>
            </blockquote>
        </div>

        <div class="layui-upload" style="margin: 20px 0;">
            <label class="layui-form-label">商品属性</label>
            <button type="button" class="layui-btn" id="attribute"><i class="layui-icon"></i>添加商品属性</button>
            <table class="attribute" style="margin-top: 10px;margin-left: 110px;">
                <tr class="atr">
                    <th class="ath" style="width: 200px;">商品规格</th>
                    <th class="ath">库存</th>
                    <th class="ath" style="width: 100px;">商品价格</th>
                    <th class="ath" style="width: 200px;border-right: 1px solid #e6e6e6">规格图片</th>
                    <th style="width: 100px;">操作</th>
                </tr>

                {if condition="isset($row->Sku)"}
                {volist name="$row->sku" id="subMenu"}
                <tr>
                    <td>
                        <input type="hidden" name="attr_id[]" value="{$subMenu->id}">
                        <input type='text' name='attribute[]' placeholder='属性颜色|尺寸' class='layui-input' style='min-width: 100px;display: inline-block' value="{$subMenu->attribute}">
                    </td>
                    <td>
                        <input type='number' name='number[]' placeholder='库存' class='layui-input' style='min-width: 50px;display: inline-block' value="{$subMenu->number}">
                    </td>
                    <td>
                        <input type='number' name='attr_price[]' placeholder='价格' class='layui-input' style='min-width: 50px;display: inline-block' value="{$subMenu->attr_price}">
                    </td>
                    <td>
                        <div class="layui-upload" style="max-width: 600px;">
                            <input type='file' style='max-width: 300px;'  value='选择图片'>

                            <input type='button' class="layui-btn" onclick='asd(this)' value='确认上传'>
                            <input type='hidden' name='attr_img[]' value='{$subMenu->attr_img}'  lay-verify='required'  placeholder='请上传图片'>
                            <img src="{$subMenu->attr_img}" width='50' height='50'>

                        </div>
                    </td>
                    <td style="text-align: center">
                        <a href='javascript:;'class='layui-btn layui-btn-xs layui-btn-primary delete'  style='margin-right: 0;font-size:12px;'><span><i class='layui-icon'></i></span></a>
                    </td>
                </tr>
                {/volist}
                {/if}
            </table>
        </div>


        <div class="layui-form-item">
            <label for="" class="layui-form-label">内容</label>
            <div class="layui-input-block">
                <script id="container" name="content" type="text/plain" style="width: 1000px;">
            {$row->content|raw}
        </script>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <input type="hidden" name="id" value="{$row.id}">
            <button class="layui-btn layui-btn-primary" type="button" onclick="close_window()" ew-event="closePageDialog">取消</button>
            <button class="layui-btn" lay-filter="modelSubmitUser" lay-submit>保存</button>
        </div>
    </form>
</div>
{include file='public/footer' /}
<script>
    layui.use(['layer', 'form', 'table', 'util', 'admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var util = layui.util;
        var admin = layui.admin;


        var url = '{:__url("mall.integral_item/edit")}';

        // 表单提交事件
        form.on('submit(modelSubmitUser)', function (data) {
            layer.load(2);

            $.post(url, data.field, function (res) {

                layer.closeAll('loading');
                if (res.code == 1) {
                    layer.msg(res.msg, {icon: 1,time: 1000},function(index){
                        window.parent.location.reload();
                    });
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }, 'json');
            return false;
        });
    });
    function close_window(){
        window.parent.location.reload();
    }
</script>
<script>
    layui.use(['upload','layer','element','form'],function () {
        var $ = layui.jquery;
        var upload = layui.upload;


        //普通图片上传
        $(".uploadPic").each(function (index,elem) {
            upload.render({
                elem: $(elem)
                ,url: '{:__url("admin/upload/upload")}'
                ,multiple: false
                ,data:{"_token":"{{ csrf_token() }}"}
                ,done: function(res){
                    //如果上传失败
                    if(res.code == 0){
                        layer.msg(res.msg,{icon:1,time:1000},function () {
                            $(elem).parent('.layui-upload').find('.layui-upload-box').html('<li><img style="width:100px;height:60px" src="'+res.url+'" /></li>');
                            $(elem).parent('.layui-upload').find('.layui-upload-input').val(res.url);
                        })
                    }else {
                        layer.msg(res.msg,{icon:2,time:1000})
                    }
                }
            });
        })


        //多图片上传
        upload.render({
            elem: '#test2',
            url: '{:__url("admin/upload/upload")}'
            //上传接口
            ,
            data:{"_token":"{{ csrf_token() }}"},
            multiple: false,

            before:function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
//                    $('#demo2').append()
                });
            },
            done: function (res) {
                //上传完毕
                if (res.code == 0) {
                    //console.log(111)
                    $('#demo2').append('<li class="item_img"><div class="operate"></i><i  class="close layui-icon"></i></div><img src="' + res.url + '" class="layui-upload-img" width="60"><input type="hidden" name="image[]" value="' + res.url + '"></li>');
                } else {
                    layer.msg(res.msg,{icon:2,time:1000})
                }
            }
        });
//点击多图上传的X,删除当前的图片
        $("body").on("click",".close",function(){
            $(this).closest("li").remove();
        });

        //添加商品属性
        $('#attribute').click(function(){
            $(".attribute").append("<tr>"+"<td><input type='text' name='attribute[]' lay-verify='required' placeholder='属性:颜色|尺寸' class='layui-input' style='min-width: 100px;display: inline-block'></td>" +
                    "<td><input type='number' name='number[]' placeholder='库存' lay-verify='required' class='layui-input' style='min-width: 50px;display: inline-block'></td>" +
                    "<td><input type='number' name='attr_price[]' id='id[]' lay-verify='required' placeholder='价格' class='layui-input' style='min-width: 50px;display: inline-block'></td>" +
                    '<td>'+
                    '<div class="layui-upload" >'+

                    "<input type='file'   value='选择图片'>"+
                    "<input type='button' class='layui-btn' onclick='asd(this)' value='确认上传'>"+
                    "<input type='hidden' name='attr_img[]' value=''  lay-verify='required'  placeholder='请上传图片'>"+
                    "<img width='50' height='50'>"+

                    "</div>"+
                    '</td>'+
                    "<td style='text-align: center'><a href='javascript:;'class='layui-btn layui-btn-xs layui-btn-primary delete'  style='margin-right: 0;font-size:12px;'><span><i class='layui-icon'></i></span></a></td>"+"</tr>");

        })

        $(document).on("click","span",function () {
            $(this).parents('tr').remove();
        })

    })
    function asd(a){
        var formData = new FormData();
        formData.append('file',$(a).prev()[0].files[0]);
        $.ajax({
            url: '{:__url("admin/upload/upload")}',
            dataType:'json',
            type:'POST',
            async: false,
            data : formData,
            processData : false, // 使数据不做处理
            contentType : false, // 不要设置Content-Type请求头
            success: function(data){
                if (data.code == 0) {
                    $(a).next().attr('value',data.url);

                    $(a).siblings("img").attr('src',data.url);

                    layer.msg('上传成功',{icon:1,time:1000});
                }else{
                    layer.msg(data.msg,{icon:2,time:1000});
                }

            },
            error:function(data){
                layer.msg(data.msg);
            }
        });
    }
</script>
<link href="/baidu-editor/themes/default/css/umeditor.min.css" type="text/css" rel="stylesheet">
<script src="/baidu-editor/third-party/jquery.min.js"></script>
<!-- 配置文件 -->
<script type="text/javascript" src="/baidu-editor/umeditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/baidu-editor/umeditor.min.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
    var ue = UM.getEditor('container');
</script>